const path = require('path');
const webpack = require('webpack');
const extractTextWebpackPlugin = require('extract-text-webpack-plugin');
const HTMLPlugin = require('html-webpack-plugin');
const HtmlIlineChunkPlugin = require('html-webpack-inline-chunk-plugin');
const webpackConfig = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, './dist'),
        filename: '[name].bundle.js',
        publicPath: ''
    },

    module: {
        rules: [{
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: [{
                    loader: 'babel-loader', //提取公共js需要用到这个工具
                    options: {
                        presets: ['env']
                    }
                }]
            },
            {
                test: /\.html$/,
                use: {
                    loader: 'html-loader', //可以自动识别src路径
                    options: {
                        attrs: ['img:src', ':data-src']
                    }
                }
            }, {
                test: /\.css$/,
                loader: extractTextWebpackPlugin.extract({ //提取css到文件
                    fallback: {
                        loader: 'style-loader', //自动生产link标签，并引入文件
                        options: {
                            singleton: true //是否合并文件
                        }
                    },
                    use: {
                        loader: 'css-loader',
                        options: {
                            minimize: true
                        }
                    }
                })
            }, {
                test: /\.(png|jpg|jpeg|gif)$/, 
                use: [{
                    loader: 'url-loader', //url-loader依赖file-loader，必须安装后者
                    options: {
                        name: '[name].[ext]',
                        outputPath: 'img/',
                        limit: 1000
                    }
                }]
            }
        ]
    },
    plugins: [
        new webpack.optimize.CommonsChunkPlugin({ //提出公共模块内容
            name: 'manifest'
        }),
        new HtmlIlineChunkPlugin({ //将公共模块代码输入到html
            inlineChunks: ['manifest']
        }),
        new webpack.ProvidePlugin({ //全局引入jquery
            $: 'jquery',
            jquery: 'jquery'
        }),
        new extractTextWebpackPlugin({ //提取css到文件
            filename: '[name].min.css',
            allChunks: true
        }),
        new HTMLPlugin({ //html入口模板
            filename: 'index.html',
            template: './index.html',
            minify:{
                collapseWhitespace: true
            }
        })
    ]
};

module.exports = webpackConfig;